<template>
  <!-- 顶部京东注册 -->
  <van-sticky>
    <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="onClickLeft" />
  </van-sticky>

  <!-- 验证码 -->
  <van-cell-group inset style="margin-top:70px">
    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
      <template #button>
        <van-button class="countbutton" size="small" @click="rightIconOne" v-if="!isDataShow">发送验证码</van-button>
        <van-button class="countbutton" size="small" v-else="isDataShow" :disabled="btnStatus === false">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.seconds }}s后再次发送</span>
            </template>
          </van-count-down>
        </van-button>
      </template>
    </van-field>
  </van-cell-group>
  <!-- 提交 -->
  <van-button style="margin-top:30px" round block type="primary" :disabled="btnStatus === false" @click="toPage"
    native-type="submit">下一步</van-button>
</template>

<script>
import { showNotify } from 'vant';
import { dosendmsgcode } from '../server/regist.js'
export default {
  name: 'login',
  data() {
    return {
      sms: "",
      isDataShow: false,   //控制是发送验证码还是验证码倒计时
      time: 600000,        //一分钟倒计时
      VerificationCode: ""
    }
  },

  created() {
    showNotify({ type: 'success', message: '继续注册' });
  },

  //通过计算属性来判断是否 不禁用 下一步
  computed: {     
    btnStatus() {
      return this.sms !== "" && Number(this.sms) === this.VerificationCode
    }
  },

  methods: {
    //返回上一页
    onClickLeft() {    
      history.back()
    },

    //当添加点击事件的时候 将isDataShow设为true
    rightIconOne() {    
      showNotify({ type: 'success', message: '发送验证码成功' });
      this.isDataShow = true
      let telphone = localStorage.getItem("telphone")
      // let telphone = this.$store.state.telphone
      // 发送请求获取验证码
      dosendmsgcode( { tel: telphone }).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.VerificationCode = res.data
          localStorage.setItem("telcode", res.data)
          // this.$store.commit("changeCode" , res.data)
        }else{
          showNotify({ type: 'error', message: '验证码错误' });
        }
      })
    },

    //点击下一步
    toPage() {    
      if (Number(this.sms) === this.VerificationCode) {
        this.$router.push("/regist/step3")
      }
    }
  },

}

</script>
<style scoped>
.block {
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.countbutton {
  background-color: #FF0000;
  border-radius: 20px;
  outline: none;
  border: none;
  color: #fff;
}

.van-button {
  background-color: red;
  border: none;
}
</style>